<template>
  <div id="index">
    <TopMenuBar></TopMenuBar>
    <BetterScroll class="content" ref="rScroll" :p-probe-type="3" @scrollWhere="mIsShowItemsForPosition"
                  :p-pull-up-load="true" @readyUp="mLoadMore">
      <NavBar :root-category="indexRootCategory"
              @classifyClickEmit="mClassifyClickEmit"
              @searchClickEmit="mSearchClickEmit"></NavBar>
      <IndexCategory class="index-category"
                     :p-categorys="indexRootCategory"
                     @goodsCategoryIdEmit="mGoodsCategoryIdEmit"></IndexCategory>
      <div>
        <ISwiper :banners="indexSwiperAll"></ISwiper>
<!--        {{$store.getters.getToken}}-->

      </div>
      <goods :goods-list="goodsListAndRecordInfo.page.list"
              class="goods-show-list">
      </goods>
<!--      <GoodsItem :goods-list-item="goodsListAndRecordInfo.page.list[0]"></GoodsItem>-->

    </BetterScroll>

    <back-top @click.native="backTopClick" v-show="isShowBackTop"></back-top> <!--组件不能被直接v-on监听原生事件,而是要使用native属性-->
<!--    <index-category></index-category>-->
  </div>
</template>

<script>
  // 导入独立于本项目的公共组件
  import BetterScroll from "components/common/betterscroll/BetterScroll";
  import Goods from "components/content/goods/GoodsList";

  // 导入依赖于本项目的公共组件
  import TopMenuBar from "components/content/topmenubar/TopMenuBar";

  // 导入本组件的子组件
  import IndexCategory from "./childComps/IndexCategory";
  import ISwiper from "./childComps/ISwiper";
  import NavBar from "./childComps/NavBar";

  // 混入的导入,
  import {backTopMixin} from "common/mixins" //导入混入

  // 导入本组件的相应网络请求
  import {getIndexData} from "network/noVer";
  import {getGoodsList} from 'network/mix';

  export default {
    name: "Index",
    mixins: [backTopMixin],
    components: {
      ISwiper,
      IndexCategory,
      TopMenuBar,
      NavBar,
      BetterScroll,
      Goods,

    },
    data() {
      return {
        indexRootCategory: [],
        indexSwiperAll: [],
        goodsListAndRecordInfo: { // 用户信息和指定的检索信息
          page: { // 当前数据的信息
            list: [], // 展示的数据集合
            count: 0, // 总记录数
            total: 1, // 总页数
            index: 0, // 当前页0,+1后,即默认第1页
          },
          // root_navs: [], // 获取root类目

          // id: 0, // 商品id
          goods_category_id: 0, // 商品类目id
          root_category_id: 0, // 商品root类目id
          // username: '', // 商品类目的创建者,即商品创建者,卖家
          name_describe_goodsCategoryName_rootCategoryName: '', // 商品名字、描述,或者商品的商品类目名字、root类目名
        },

        isShowBackTop: false, //默认不显示回到最上按钮
        // middleMenuOffsetTop: 582, //默认的中间菜单的offsetTop大小
        isFixedMiddleMenu: false, //是否固定middleMenu,实际上是是否显示
        saveY: 0, //用于保存Y轴的位置
      }
    },
    activated() { //该组件活跃时,即点击该组件
      const sc = this.$refs.rScroll //调用ref的name名为rScroll的组件对象;
      sc.mScrollTo(0, this.saveY, 0) //调用封装的scroll到何处的方法
      sc.mRefresh() //最好进行一次刷新,不然有时不会生效
    },
    deactivated() { //该组件不活跃时,即每点击该组件
      const sc = this.$refs.rScroll //调用ref的name名为rScroll的组件对象;
      this.saveY = sc.mGetY() //调用封装的获取scroll的Y轴方法,并把它存储到saveY属性,以供下次使用
    },
    created() {
      this.mGetIndexData()
      this.mGetGoodsList()
    },
    mounted() {
    },
    methods: {

      mIsShowItemsForPosition (position) { //根据滚动决定是否展示隐藏的元素
        // console.log(position);
        this.mIsShowBackTop(position) //调用混入的决定是否显示隐藏的回顶按钮函数
        // this.isFixedMiddleMenu = - position.y > this.middleMenuOffsetTop //决定是否展示隐藏的中间菜单
      },
      mLoadMore () { //上拉加载更多
        this.mGetGoodsList();
      },


      /**接收响应本组件的网络请求方法*/
      mGetIndexData() {
        getIndexData()
          .then(res => { /***/
            // console.log(res);
            this.indexRootCategory = res.data.root_navs
            this.indexSwiperAll = res.data.index_swiper_all
          })
          .catch(err => { /**response响应错误*/
            console.log('err=' + err);
            // this.$router.push('/login')
            // if (err.response.status === 401) {
              console.log(err);
              // this.$router.push('/login');
            // }
          })
      },
      mGetGoodsList() { // 获取商品信息的方法
        if (this.goodsListAndRecordInfo.page.index < this.goodsListAndRecordInfo.page.total) { // 如果不是最后一页
          getGoodsList(0, this.goodsListAndRecordInfo.goods_category_id, this.goodsListAndRecordInfo.root_category_id, '', this.goodsListAndRecordInfo.name_describe_goodsCategoryName_rootCategoryName, this.goodsListAndRecordInfo.page.index + 1)
            .then(result => {
              // console.log('sddddddddddddddddddd');
              // console.log(result);
              this.goodsListAndRecordInfo.page.list.push(...result.page.list); // 将查询到的数据推入数组
              this.goodsListAndRecordInfo.page.count = result.page.count
              this.goodsListAndRecordInfo.page.index = result.page.index
              this.goodsListAndRecordInfo.page.total = result.page.total

              // this.goodsListAndRecordInfo.id = result.id
              this.goodsListAndRecordInfo.goods_category_id = result.goods_category_id
              this.goodsListAndRecordInfo.root_category_id = result.root_category_id
              // this.goodsListAndRecordInfo.username = result.username
              this.goodsListAndRecordInfo.name_describe_goodsCategoryName_rootCategoryName = result.name_describe_goodsCategoryName_rootCategoryName

              // console.log(this.goodsListAndRecordInfo);

              const sc = this.$refs.rScroll //调用ref的name名为rScroll的组件对象;
              sc.mFinshPullUp(); //调用封装的下拉事件完成方法

              if (this.goodsListAndRecordInfo.page.index === 1) { // 仅在第一次加载成功时弹出此,即index=1,第一页
                this.$succ_ty_toast.toShow('加载成功,以为您挑选出' + this.goodsListAndRecordInfo.page.count + '个商品', 3000)
              }
            })
            .catch(error => {
              console.log('获取商品列表失败');
              console.log(error);
            })
        } else {
          this.$mes_ty_toast.toShow('没有更多的商品了', 2000)
        }
      },

      mSearchClickEmit(value) { // 点击搜索按钮或预搜索项
        this.goodsListAndRecordInfo.name_describe_goodsCategoryName_rootCategoryName = value // 赋值关键字
        this.goodsListAndRecordInfo.page.list = [] // 清空原先的商品数组
        this.goodsListAndRecordInfo.page.index = 0 // 当前页面至为0
        this.goodsListAndRecordInfo.page.total = 1 // 总页码至为1
        // this.goodsListAndRecordInfo.page.count = 0
        // this.goodsListAndRecordInfo.id = 0
        this.goodsListAndRecordInfo.goods_category_id = 0
        this.goodsListAndRecordInfo.root_category_id = 0
        // this.goodsListAndRecordInfo.username = ''
        // console.log('sffffffffffffffffffffffffff');
        // console.log(this.goodsListAndRecordInfo.name_describe_goodsCategoryName_rootCategoryName);

        this.mGetGoodsList() // 调用获取商品信息的方法

      },
      mClassifyClickEmit(id) { // 点击主类目获取的商品信息
        this.goodsListAndRecordInfo.root_category_id = id

        this.goodsListAndRecordInfo.page.list = [] // 清空原先的商品数组
        this.goodsListAndRecordInfo.page.index = 0 // 当前页面至为0
        this.goodsListAndRecordInfo.page.total = 1 // 总页码至为1
        // this.goodsListAndRecordInfo.page.count = 0
        this.goodsListAndRecordInfo.name_describe_goodsCategoryName_rootCategoryName = '' // 关键字赋值为空
        // this.goodsListAndRecordInfo.id = 0
        this.goodsListAndRecordInfo.goods_category_id = 0
        // this.goodsListAndRecordInfo.username = ''

        this.mGetGoodsList() // 调用获取商品信息的方法

      },

      mGoodsCategoryIdEmit(id) { // 点击商品类目时
        this.goodsListAndRecordInfo.goods_category_id = id
        this.goodsListAndRecordInfo.page.list = [] // 清空原先的商品数组
        this.goodsListAndRecordInfo.page.index = 0 // 当前页面至为0
        this.goodsListAndRecordInfo.page.total = 1 // 总页码至为1
        // this.goodsListAndRecordInfo.page.count = 0
        this.goodsListAndRecordInfo.name_describe_goodsCategoryName_rootCategoryName = '' // 关键字赋值为空
        // this.goodsListAndRecordInfo.id = 0
        // this.goodsListAndRecordInfo.username = ''
        this.mGetGoodsList() // 调用获取商品信息的方法

      }

    }
  }
</script>

<style scoped>
  .content {
    overflow: hidden;
    position: absolute;
    top: 25px;
    bottom: 0;
    left: 0;
    right: 0;

    /*background-color: red;*/
  }
  .index-category {
    position: absolute;
  }
  .goods-show-list {
    margin-top: 10px;
  }
</style>